/*实线标签页的切换*/

function initSwitchTab(){
    //1.先获取到相关的元素（标签页的按钮，会话列表，好友列表）
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    //可以同时选中多个元素，得到的结果是数组
    let lists = document.querySelectorAll('.list');
    //2.针对标签页按钮，注册点击事件
    //如果是点击会话标签按钮，就会把会话标签按钮的背景图片进行设置
    //同时把会话列表显示出来，把好友列表隐藏
    tabSession.onclick = function(){
        //1.设置图标
        tabSession.style.backgroundImage = 'url(img/对话.png)';
        tabFriend.style.backgroundImage = 'url(img/用户2.png)';
        //2.让会话列表显示出来，让好友列表隐藏
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

//如果是点击好友标签按钮，就会把好友标签按钮的背景图片进行设置
    //同时把好友列表显示出来，把会话列表隐藏
    tabFriend.onclick = function(){
    //设置图标
    tabSession.style.backgroundImage = 'url(img/对话2.png)';
    tabFriend.style.backgroundImage = 'url(img/用户.png)';
    //2.让好友列表显示出来，让会话列表隐藏
    lists[0].classList = 'list hide';
    lists[1].classList = 'list';
}
}
initSwitchTab();

////////////////////////////
/////操作websocket实例///////
////////////////////////////

//创建websocket实例
//let websocket = new WebSocket("ws://127.0.0.1:8080/WebSocketMessage");
let websocket = new WebSocket("ws:/" + location.host + "/WebSocketMessage");
websocket.onopen = function(){
    console.log("websocket 连接成功！");
}

websocket.onmessage = function(e){
    console.log("websocket 收到消息！" + e.data);
    //此时收到的e.data是个json字符串，需要转成js对象
    let resp = JSON.parse(e.data);
    if(resp.type == 'message'){
        //处理消息响应
        handleMessage(resp)
    }else{
        console.log("resp.type 不符合要求！")
    }
}

websocket.onclose = function(){
    console.log("websocket 关闭连接！");
}

websocket.onerror = function(){
    console.log("websocket 连接异常！");
}

function handleMessage(resp){
    //把客户端收到的消息给展示出来
    //展示到对应的会话预览区域以及右侧消息列表中
    //1.根据响应中的sessionId 获取li标签
    let curSessionLi = findSessionLi(resp.sessionId);
    if(curSessionLi == null){
        //就需要创建出一个新的li标签
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message-session-id',resp.sessionId);
        curSessionLi.innerHTML = '<h3>' + resp.fromName +'</h3>'+'<p></p>';
        //给这个li标签加上点击事件的处理
        curSessionLi.onclick = function(){
            clickSession(curSessionLi);
        }
    }
    //2.把新消息显示到预览区域
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if(p.innerHTML.length > 10){
        p.innerHTML = p.innerHTML.substring(0, 10) + '...';
    }
    //3.把收到消息的会话给放到会话列表最上面
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi,sessionListUL.children[0]);
    //4.如果当前收到消息处于被选中状态，这把当前的消息给放到右侧消息列表中
    //新增消息的同时注意调整滚动条的位置，保证新消息虽然在底部但是能被用户直接看到
    if(curSessionLi.className == 'selected'){
        //把消息列表添加一个新消息
        let messageShowDiv = document.querySelector('.right .message-show');
        addMessage(messageShowDiv,resp);
        scrollBottom(messageShowDiv);
    }

    //其他操作还可以在回话窗口上给提示
}

function findSessionLi(targetSeesionId){
    //获取到所有的会话列表中的li标签
    let sessionLis = document.querySelectorAll('#session-list li');
    for(let li of sessionLis){
        let sessionId = li.getAttribute('message-session-id');
        if(sessionId == targetSeesionId){
            return li;
        }
    }
    return null;
}
///////////////////////////////////////
/////////实现消息发送/接受逻辑///////////
///////////////////////////////////////
function initSendButton(){
    //1.获取到发送按钮和消息输入框
    let sendButton = document.querySelector('.right .ctrl button');
    let messageInput = document.querySelector('.right .message-input');
    //2.给发送按钮注册一个点击事件
    sendButton.onclick = function(){
        console.log("!!!!!!!!!")
        if(!messageInput.value){
            return;
        }
        //获取当前选中的li标签的sessionId
        let selectedLi = document.querySelector('#session-list .selected');
        if(selectedLi == null){
            //当前没有li标签被选中
            return;
        }
        let sessionId = selectedLi.getAttribute('message-session-id');
        //构造json数据
        let req = {
            type:'message',
            sessionId:sessionId,
            content:messageInput.value
        };
        //转换
        req = JSON.stringify(req);
        console.log("[websocket] send:" + req);
        //通过websocket发送消息
        websocket.send(req);
        //发送完成之后清空之前的输入框
        messageInput.value = '';
    }
}
initSendButton();
////////////////////////////////////////////////////
/////////////从服务器获取到用户登录数据///////////////
////////////////////////////////////////////////////

function getUserInfo(){
    $.ajax({
        type:'get',
        url:'userInfo',
        success: function(body){
            //从服务器获取到数据
            //校验结果是否有效
            if(body.userId && body.userId > 0){
                 //结果有效这把用户名显示到页面
                 let userDiv = document.querySelector('.main .left .user');
                 userDiv.innerHTML = body.username;
                 userDiv.setAttribute("user-id",body.userId);
            }else{
                //如果结果无效则跳转到登录页面
                alert("当前用户未登录！");
                location.assign('login.html');
            }
        }
    });
}
getUserInfo();

function getFriendList(){
    $.ajax({
        type:'get',
        url:'friendList',
        success: function(body) {
            //1.先把之前的好友列表的内容清空
            let friendListUL = document.querySelector('#friend-list');
            friendListUL.innerHTML = '';
            //2.遍历 body ，把服务器响应的结果加回到当前的friend-list 中
            for(let friend of body){
                let li = document.createElement('li');
                li.innerHTML ='<h4>' + friend.friendName + '</h4>';
                //此处把friendId也记录下来
                //把friendId 作为一个html的自定义属性，加到li标签上
                li.setAttribute('friend-id',friend.friendId);
                friendListUL.appendChild(li);//保存到url中

                //每个 li 标签，就对应界面上的一个好友选项，给这个li奖赏点击事件处理
                li.onclick = function(){
                    clickFriend(friend);
                }
            }
        },
        error: function(){
            console.log('获取好友列表失败！');
        }
    });
}

getFriendList();

//会话列表
function getSessionList(){ 
    $.ajax({
        type: 'get',
        url: 'sessionList',
        success: function(body){
            //1.清空之前的会话列表
            let sessionListUL = document.querySelector('#session-list');
            sessionListUL.innerHTML = '';
            //2.遍历响应的数组，针对结果来构造页面
            for(let session of body){
                if(session.lastMessage.length > 10){
                    session.lastMessage = session.lastMessage.substring(0,10) + '...';
                }
                let li = document.createElement('li');
            //把会话id保存到li标签的自定义属性中.
            li.setAttribute('message-session-id',session.sessionId);
            li.innerHTML = '<h3>'+ session.friends[0].friendName + '</h3>' +
             '<p>' + session.lastMessage +'</p>';
            sessionListUL.appendChild(li);

            //给li标签新增点击事件
            li.onclick = function(){
                clickSession(li);
            }
            }
        }
    });
}

getSessionList();
//点击函数
function clickSession(currentLi){
    //1.设置高亮
    let allLis = document.querySelectorAll('#session-list>li');
    activeSession(allLis, currentLi);
    //2.获取指定会话的历史消息
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi) {
    for(let li of allLis){
        if(li == currentLi){
            li.className = 'selected';
        }else{
            li.className = '';
        }
    }
}

//这个函数负责获取指定会话的历史消息
function getHistoryMessage(sessionId){
    console.log("获取历史消息 sessionId=" + sessionId);
    //1.先清空右侧列表中的已有内容
    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = '';
    let messageShowDiv = document.querySelector('.right .message-show');
    messageShowDiv.innerHTML = '';
    //2.重新设置会话的标题
    //先找到当前选中的会话是哪个，被选中的会话带有select类
    let selectedH3 = document.querySelector('#session-list .selected>h3');
    if(selectedH3){
        titleDiv.innerHTML = selectedH3.innerHTML;
    }
    //3.发送ajax请求给服务器，获取到该会话的的历史消息
    $.ajax({
        type:'get',
        url:'message?sessionId=' + sessionId,
        success: function(body){
            //此处返回的body是个js对象数组，里面的每个元素都是一条消息
            for(let message of body){
                addMessage(messageShowDiv,message);
            }
            //在构造好消息列表后，控制滚动条自动滚动到最下方
            scrollBottom(messageShowDiv);
        }
    });
}
//把一条消息加入到界面中
function addMessage(messageShowDiv,message){
    //使用这个div表示一条消息
    let messageDiv = document.createElement('div');
    //此处需要针对当前消息是不是用户自己发的，决定是靠左还是靠右
    let selfUsername = document.querySelector('.left .user').innerHTML;
    if(selfUsername == message.fromName){
        messageDiv.className = 'message message-right';
    }else{
        messageDiv.className = 'message message-left';
    }
    messageDiv.innerHTML = '<div class="box">' + '<h4>' + message.fromName + '</h4>' + 
    '<p>' + message.content + '</p>' + '</div>';
    messageShowDiv.appendChild(messageDiv);
}
//把messageShowDiv 里的内容滚动到底部
function scrollBottom(elem){
    //1.获取到可视区域的高度
    let clientHeight = elem.offsetHeight;
    //2.获取到内容的总高度
    let scrollHeight = elem.scrollHeight;
    elem.scrollTo(0,scrollHeight - clientHeight);
}

//点击好友列表项，触发的函数
function clickFriend(friend){
    //1.先判定一下当前这个好友是否有对应的会话
    //  使用一个单独的函数来实现，这个函数参数是用户的名字，返回值是一个 li 标签，
    //找到了就是返回了对应回话列表里的 li，如果没找到返回null
    let sessionLi = findseessionByName(friend.friendName);
    let sessionListUL = document.querySelector('#session-list');
    if(sessionLi){
            //2.如果存在匹配的结果，就把这个会话设置成选中状态，获取历史消息，并且置顶
            //insertBefore 把这个找到的li标签放到最前面去
            sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);
            sessionLi.click();
    }else{
            //3.如果不存在匹配结果，就创建个新会话（创建 li 标签 + 通知服务器）
            sessionLi = document.createElement('li');
            //构造li标签内容
            sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
            //把标签置顶
            sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
            sessionLi.onclick = function(){
                clickSession(sessionLi);
            }
            sessionLi.cilck();
            //发送消息给服务器，告诉服务器当前新创建的会话是啥样的
            createSession(friend.friendId,sessionLi);
    }
    //4.还需要把标签页给切换到会话列表
    //只要找到会话列表标签页按钮，模拟一个点击操作即可
    let tabSession = document.querySelector('.tab .tab-session');
    tabSession.click();
}

function findseessionByName(username){
    //先获取到会话列表中所有的 li 标签
    //然后一次便利，看看这些li标签谁的名字和要查找的名字一致
    let sessionLis = document.querySelectorAll('#session-list>li');
    for(let sessionLi of sessionLis){
        //获取到该li标签里的h3标签，进一步得到名字
        let h3 = sessionLi.querySelector('h3');
        if(h3.innerHTML == username){
            return sessionLi;
        }
    }
    return null;
}

function createSession(friendId,sessionLi){
    $.ajax({
        type:'post',
        url:'session?toUserId=' + friendId,
        success: function(body){
            console.log("会话创建成功！sessionId = " +body.sessionId);
            sessionLi.setAttribute('message-session-id',body.sessionId);
        },
        error: function(){
            console.log('会话创建失败！');
        }
    });
}